import React, {Component} from 'react'
import { Pagination, Icon } from 'antd';
import { Map, is } from 'immutable';
import TableList from './List'
import { fetchData } from '../../components/AjaxConsumer'
import styles from  './index.scss'

export default class ListComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,  //loading 加载

            indexList: [],//当前渲染的页面数据
            current: 1, //当前页码
            pageSize: 20, //每页显示的条数
            totalPage: 0,//总页数
            totalCount: 0, //总记录数
            conditonData: this.props.searchCondition //查询条件
        };
        this.selectedRowsObj = [];
    }
    componentWillMount() {
        this.getListData();
    }
    componentWillReceiveProps(nextProps) {

        let blCompare = false;  //比较搜索条件是否变化，如果没有变化不执行查询
        const map1 = Map(this.props.searchCondition);
        const map2 = Map(nextProps.searchCondition);
        if(!is(map1, map2)){
            blCompare = true;
        }
        if(blCompare){
            this.pageNext(null, null, nextProps.searchCondition);
        }
    }
    //获取数据
    getListData(num, pageSize, conditonData) {
        if(typeof(num) == "undefined" || num == null || num.length==0){
            num = this.state.current;
        }
        if(typeof(pageSize) == "undefined" || pageSize == null || pageSize.length==0){
            pageSize = this.state.pageSize;
        }
        if(typeof(conditonData) == "undefined" || conditonData == null || conditonData.length==0){
            conditonData = this.state.conditonData
        }else{
            //点击搜索，有查询条件，分页要重新从第一页开始
            num = 1;
            //保存查询条件
            this.setState({
                conditonData: conditonData
            });
        }
        const options= {
            url: this.props.url,
            type: 'post',
            condition:{
                page: num,
                rows: pageSize,
                ...conditonData
            }
        };
        fetchData(this, options, (resData) => {
            if(resData.code == "1"){
                this.setState({
                    loading: false,
                    indexList: resData.data.records, //当前页面数据
                    totalCount: resData.data.totalCount, //总记录数
                    totalPage: resData.data.totalPage,//总页数
                    current: num, //当前页码
                    pageSize: pageSize, //每页显示的条数
                });
            }else{
                console.log("请求数据错误：", resData.message);
            }
        });
    }
    rowHandles = (strHandles) => {
        this.props.rowHandles(strHandles, this.selectedRowsObj);
    }
    selectedRowsObjHandles = (rowsObj) => {
        this.selectedRowsObj = rowsObj;
    }
    //刷新列表
    refreshHandle = () => {
        this.selectedRowsObj = [];//清空选中的行数据
        this.pageNext();
    }
    pageNext(num, pageSize, conditonData) {
        this.setState({
            loading: true
        });
        this.getListData(num, pageSize, conditonData);
    }
    onShowSizeChange = (current, pageSize) => {
        this.pageNext(current, pageSize);
    }
    onPageChange = (pageNumber) => {
        this.pageNext(pageNumber);
    }

    render() {

        let headerOperation = this.props.headerOperation ? this.props.headerOperation : [];
        let headerHtml= <div style={{marginTop: '5px'}}></div>;
        if(this.props.headerOperation){
            let headerOperationHtml = headerOperation.map( (e, index) => {
                return(
                    <a key={index} className='mr-10 changeWordStyle'
                       style={{marginRight:'20px',fontSize:'14px',lineHeight:'30px',color:'#666'}}
                       onClick={this.rowHandles.bind(this, e.handleName)}>
                        <Icon type={e.iconClass?e.iconClass:'tags-o'} />
                        {e.showName}
                    </a>
                )
            })
            headerHtml = (
                <div className='formTitle'>
                    <span className='left'></span>
                    <span className='right'>
                        {headerOperationHtml}
                    </span>
                </div>
            )
        }

        return (
            <div className='formBoxStyle'>

                {headerHtml}

                <TableList
                    {...this.props}
                    loading = {this.state.loading}
                    indexList={this.state.indexList}
                    pageNext={this.pageNext}
                    selectedRowsObjHandles={this.selectedRowsObjHandles}
                />
                <div className={styles.page}>
                    <Pagination
                        showSizeChanger
                        onShowSizeChange={this.onShowSizeChange}
                        showQuickJumper
                        defaultCurrent={1}
                        defaultPageSize={20}
                        total={this.state.totalCount}
                        onChange={this.onPageChange}
                        current = {this.state.current}
                    />
                </div>
            </div>
        );
    }
}
